<template>
	<!-- #ifdef MP-WEIXIN -->
	<navBar></navBar>
	<!-- #endif -->

	<StepsList :procedure="procedure"></StepsList>

	<listNote :times="procedure" ref="refData"></listNote>


	<view class="row j-centert p-bot100 m-top80">
		<view class="Btns" @click="Continue">下一步</view>
	</view>






</template>

<script setup>
	import StepsList from '@/User/components/StepsList.vue';
	import { ref, inject } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import Http from '@/common/request.js';
	import common from "@/common/common.js";
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const { imgUrls: $imgUrls, Toast, toUrl, pageTab } = inject('Utils');
	const procedure = ref(1);
	const show = ref(false);
	const refData = ref(null);

	onLoad((opt) => {
		if (opt.procedure) procedure.value = Number(opt.procedure) + 2;
	})

	const Continue = () => {
		for (var item of refData.value.pageData) {
			if (item.bixu == 1 && !item.value) return Toast(`${item.vpName}不能为空！`)
		}
		Http.post({
			url: '/WeddingApi/edit_base_info',
			data: {
				property: JSON.stringify(refData.value.pageData)
			}
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			if (procedure.value == 5) return pageTab(`/pages/User/User`);
			procedure.value++;
		})
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.list,
	.sele_list,
	.listBot {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-sizing: border-box;
	}

	.list,
	.sele_list {
		margin-bottom: 30rpx;
	}

	.name {
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
	}

	.Input {
		flex: 1;
		height: 100%;
		text-align: right;
		font-size: 30rpx;
		padding-left: 20rpx;
	}




	.Btns {
		width: 600rpx;
		height: 80rpx;
		background-color: $themeColor;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Photos,
	.textarea {
		width: 100%;
		padding: 24rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
	}

	.rowList {
		width: 30%;
		margin-right: 4.8%;
	}

	.rowList:nth-child(3n) {
		margin-right: 0;
	}

	.LitImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		position: relative;
	}

	.LitImg::after,
	.textarea_txt::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #cccccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}

	.icon-shanchu1 {
		position: absolute;
		background-color: #ffffff;
		top: -12rpx;
		right: -12rpx;
		z-index: 10;
		border-radius: 50%;
	}

	.textarea_txt {
		width: 100%;
		padding: 24rpx;
		height: 250rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		position: relative;
	}

	.PopUp {
		width: 100%;
		padding: 30rpx 0 40rpx 0;
		display: flex;
		flex-direction: column;
	}

	.popList {
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		background-color: #f2f2f2;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.popActive {
		color: #ffffff;
		background-color: $themeColor;
	}
</style>